<template>
  <div class="luckDraw">
    <div class="left">
      <div class="Lcontainer">
        <PrizeList @btnPrize="btnPrize" ref="PrizeL" @clearLuck="clearLuck" @changSelect="changSelect"></PrizeList>
      </div>
    </div>
    <div class="center">
      <ProductList :prize="Prize" @startCheck="startCheck" ref="ProductListMethod"></ProductList>
    </div>
    <div class="right">
      <Pname :startC="startC" ref="startCheckLuck" @newLuckPeople="newLuckPeople"></Pname>
    </div>
  </div>
</template>
<script>
import PrizeList from './leftMainPrizeList.vue'
import ProductList from './centerMainProduct.vue'
import Pname from './rightMainName.vue'

export default {
  components: { PrizeList, ProductList, Pname },
  data() {
    return {
      Prize: {
        id: 1,
        name: '文记星兔儿爷礼盒',
        winPrize: [],
        disabled: false,
        url: require('@/assets/05-03.png'),
        size: 5
      },
      startC: null
    }
  },

  methods: {
    clearLuck() {
      this.$refs.startCheckLuck.clearPeople()
    },
    changSelect(tag) {
      this.$refs.startCheckLuck.changeTAg(tag)
    },
    btnPrize(item) {
      this.Prize = item
      this.$refs.ProductListMethod.prize = item
      this.$store.commit('setShowFlag')
    },
    startCheck(item) {
      this.startC = item
      this.$refs.startCheckLuck.startLuckDraw(item)
    },
    newLuckPeople(item) {
      // console.log(item)
      this.$refs.PrizeL.showPeople(item)
    }
  }
}
</script>
<style lang="scss" scoped>
.luckDraw {
  background-image: url('@/assets/choujiang-bg.png');
  background-repeat: no-repeat;
  /* 不平铺。图片只展示一次。 */
  height: 100%;
  width: 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  display: flex;

  .left {
    height: 100%;
    width: 29%;

    .Lcontainer {
      background-image: url('@/assets/jiangpin-bg.png');
      background-repeat: no-repeat;
      /* 不平铺。图片只展示一次。 */
      -moz-background-size: 100% 100%;
      background-size: 100% 100%;
      height: calc(100% - 186px);
      // margin-top: 15%;
      margin-top: 116px;
      margin-left: 86px;
      margin-right: 10px;
      padding: 50px 34px 0 34px;
    }
  }

  .center {
    height: 100%;
    width: 30%;
  }

  .right {
    height: 100%;
    width: 41%;
  }
}
</style>
